<template>
	<view class="personnelPage">
		<view class="page-header">
			<view class="header-card">
				<view class="icon">
					<u-icon name="arrow-left" color="''" size="20" @click="hideModel"></u-icon>
				</view>
				<view class="search">
					<u-search v-model="keyword" @custom="GetGLR" :clearabled="false" placeholder="请输入姓名" height="40"
						margin="20rpx" bg-color="#ffffff" placeholder-color="#A2A6AC"
						:action-style="{width:'130rpx',height:'80rpx',background:'#2A8FFC','border-radius':'25px','margin':'0 20rpx','font-size':'28rpx',color:'#fff','line-height':'80rpx','text-align':'center'}">
					</u-search>
				</view>
			</view>
			<view class="header-tabs">
				<view class="tab" @click="handleTabClick(index)" v-for="(item, index) in tabs" :key="item">
					<view class="text" :class="{active: currTabIndex == index}">{{item}}</view>
				</view>
			</view>
			<view class="tab-footer" v-if="currTabIndex">
				请选择关联人员部门
			</view>
		</view>
		<scroll-view class="u-flex-1 content" scroll-y>
			<template v-if="List.length>0">
				<u-index-list offset-top="210" index-list="" z-index="98" active-color="#fff">
					<view v-for="(item, index) in List" :key="index" class="list-box">
						<u-index-item>
							<u-index-anchor :text="item.title" bgColor="#fff"></u-index-anchor>
						</u-index-item>
						<view class="list-cell" v-for="(i,idx) in item.items" :key="idx">
							<view class="u-flex-1 u-flex">
								<u-avatar :text="i.name[0]" bg-color="#2A8FFC" size="45" class="user-name"
									style="color: #fff;">
								</u-avatar>
								<text class="u-m-l-10">{{i.name}}</text>
							</view>
							<u-checkbox-group @change="(e) => selectCorrelation(e, i.id)">
								<u-checkbox size="26" v-model="i.checked" :name="`${i.id}|$|${i.name}`"></u-checkbox>
							</u-checkbox-group>
							<!-- <u-checkbox-group @change="(e) => selectCorrelation(e, i.id)">
								<u-checkbox size="26" v-model="i.checked" :name="`${i.id}|$|${i.name}`"></u-checkbox>
								<!-- 	<u-checkbox @change="selectNeed" size="26" :disabled="!i.checked" v-model="i.needed"
									:name="`${i.id}`"></u-checkbox> -->
							</u-checkbox-group>
							<view class="correlation-need-box" :class="tabCurrent==1?'need-box2':''"
								v-if="index==0 && idx==0">
								<view class="need-tip">是否需要完成</view>
							</view>
						</view>
					</view>
				</u-index-list>
			</template>
			<template v-else-if="currTabIndex">
				<view v-if="tabCurrent==0" class="over-hidden">
					<u-loadmore :status="status" margin-top="40" margin-bottom="40"
						:load-text="{nomore:'暂无数据',loading:'加载中'}" />
				</view>
				<view class="no-client" v-else>
					<view class="no-client-img">
						<u-image src="/static/client/no-subclient.png" width="384rpx" height="496rpx"></u-image>
					</view>
					<view>暂无数据</view>
					<view>请先选择关联人员部门</view>
				</view>
			</template>
		</scroll-view>
		<!-- <view class="container"></view> -->
		<view class="footer" @click="selectSure">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '按照部门'],
				currTabIndex: 0,
				selectList: [], //默认选中的人
				index: 0,
				List: [{
					"KHJBXX": {
						"ID": "00CEAA020A8A4BA29CACBBE69C8012CA",
						"YGBH": "YG000386",
						"SJYGBH": "YG000020",
						"YGZH": "人事测试号1",
						"ZHMM": "E10ADC3949BA59ABBE56E057F20F883E",
						"YGXM": "人事测试号1",
						"YGYX": "123@qq.com",
						"OpenID": null,
						"YGSR": "0001-01-01T00:00:00",
						"YGXB": "0",
						"YGSFZ": "",
						"YGSJ": "18758558663",
						"YGRZSJ": "2024-07-01T00:00:00",
						"YGLXDZ": "",
						"YGXL": "",
						"YGZY": "",
						"BYYX": "",
						"BZ": "",
						"YGJD": "YG000020|YG000020|YG000386",
						"SSZWBH": "114",
						"SSJGBH": "JG000083",
						"SSJGJD": "JG000001|JG000083",
						"YGPX": 0,
						"AddTime": "2024-07-02T09:20:59.763",
						"AddAcc": "admin",
						"AddAccName": "管理员（误删）",
						"AddIP": "183.159.213.55",
						"ChgTime": "2024-07-02T09:20:59.763",
						"ChgAcc": "admin",
						"ChgAccName": "管理员（误删）",
						"ChgIP": "183.159.213.55",
						"Deleted": "0",
						"Lng": null,
						"Lat": null,
						"WeiXinOpenID": null,
						"UnionID": null,
						"CKJGJD": "",
						"CKJGBH": null,
						"IsNull": false
					},
					"index": "R"
				}, {
					"KHJBXX": {
						"ID": "017646BEA30D4FA6AFFDCB6EF2FE4B45",
						"YGBH": "YG000097",
						"SJYGBH": "YG000035",
						"YGZH": "hzy",
						"ZHMM": "C3E2870D9736AA451D9D5D56E6B5DD5B",
						"YGXM": "侯周燕",
						"YGYX": "123@qq.com",
						"OpenID": "oEm8W5cgpUM-qbR6sbObfaXudpho",
						"YGSR": "0001-01-01T00:00:00",
						"YGXB": "0",
						"YGSFZ": "",
						"YGSJ": "19511254883",
						"YGRZSJ": "2021-12-02T00:00:00",
						"YGLXDZ": "",
						"YGXL": "",
						"YGZY": "",
						"BYYX": "",
						"BZ": "",
						"YGJD": "YG000020|YG000020|YG000035|YG000097",
						"SSZWBH": "331",
						"SSJGBH": "JG000016",
						"SSJGJD": "JG000001|JG000003|JG000013|JG000016",
						"YGPX": 0,
						"AddTime": "2021-12-04T14:51:33.58",
						"AddAcc": "huangyy",
						"AddAccName": "黄玉叶",
						"AddIP": "115.196.5.56",
						"ChgTime": "2023-08-11T22:19:58.92",
						"ChgAcc": "admin",
						"ChgAccName": "管理员（误删）",
						"ChgIP": "101.71.225.106",
						"Deleted": "0",
						"Lng": null,
						"Lat": null,
						"WeiXinOpenID": null,
						"UnionID": "o1GsJ0hvN_N28pnJhZ8sYze3USTc",
						"CKJGJD": "",
						"CKJGBH": null,
						"IsNull": false
					},
					"index": "H"
				}, ]
			}
		},
		props: {

		},
		created() {
			// 默认就加载全部列表的数据
			this.List = this._normalizeSinger(this.List)
			console.log(this.List);
		},
		methods: {
			handleTabClick(index) { //部门tab选择
				this.currTabIndex = index
				this.List = []
			},
			_normalizeSinger(list) {
				let map = {};
				list.forEach((item, index) => {
					const key = item.index;
					if (!map[key]) {
						map[key] = {
							title: key,
							items: []
						}
					}
					const hasSelect = this.selectList.find(d => {
						return d.id == item.KHJBXX.ID
					})

					map[key].items.push({
						name: item.KHJBXX.YGXM,
						id: item.KHJBXX.ID,
						checked: hasSelect ? true : false,
						needed: hasSelect && hasSelect.type == '0' ? false : true
					})
				})
				let ret = [],
					hot = [];
				for (let key in map) {
					let val = map[key];
					if (val.title.match(/[a-zA-Z0-9]/)) {
						ret.push(val);
					}
				}
				ret.sort((a, b) => {
					return a.title.charCodeAt(0) - b.title.charCodeAt(0)
				})
				return hot.concat(ret)
			},
			hideModel() {
				this.$emit('hideSelectPop');
			},
			// depTabChange(index) {
			// 	this.depTabCurrent = index;
			// 	this.$refs.subDropdown.close();
			// 	this.GetGLR();
			// },
			selectCorrelation(e, id) { //选择
				let datas = this.selectList;
				let list = []

				let info;
				if (e.length) {
					list = e[0].split('|$|') || [];
					info = {
						id: list[0],
						name: list[1]
					}
				}
				if (e.length) {
					if (this.index) {
						datas.push(info)
					}
					this.index += 1
				} else {
					datas.forEach((item, index) => {
						if (item.id == id) {
							this.index -= 1
							datas.splice(index, 1);
						}
					})
				}
				if (this.index == 1) {
					datas = []
				}
				console.log(datas);
			},
			// selectNeed(e) {
			// 	let arr = this.selectList || [];
			// 	arr.forEach((item, index) => {
			// 		if (item.id == e.name) {
			// 			item.type = e.value ? '1' : '0'
			// 		}
			// 	})
			// 	this.selectList = arr;
			// },
			selectSure() {
				let selectList = this.selectList || [];
				selectList.forEach(item => {
					if (!item.type && item.type != 0) {
						item.type = '1'
					}
				})
				this.$emit('selectCorrelationSure', selectList);
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-index-list__letter {
		display: none !important;
	}

	.personnelPage {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background: #F1F1F5;

		.page-header {
			.header-card {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					margin-left: 9px;
				}

				.search {
					flex: 1;
				}
			}

			.header-tabs {
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;

				.tab {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					font-size: 28rpx;
					color: #303133;

					.text {
						width: 120rpx;
						height: 100%;
						line-height: 80rpx;
						text-align: center;
						border-bottom: 1px solid transparent;
					}

					.active {
						color: #2A8FFC;
						border-bottom-color: #2A8FFC;
					}
				}
			}
		}

		.content {
			overflow: hidden;
		}

		.u-flex {
			display: flex;
			align-items: center;
		}

		.u-flex-1 {
			flex: 1;
		}

		.list-box {
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.list-cell {
			height: 120rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			// overflow: hidden;
			color: #333;
			font-size: 32rpx;
			margin: 0 40rpx;
			border-bottom: 1px solid #E5E5E5;
			position: relative;
		}

		.list-cell:nth-last-child(1) {
			border: none;
		}

		.anchor-text {
			font-size: 28rpx;
			color: #666666;
			padding-left: 40rpx;
		}

		.tab-box {
			background-color: #fff;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #2A8FFC;
			line-height: 100rpx;
			z-index: 10;
			font-size: 28rpx;
			text-align: center;
			color: #fff;
		}

		.sub-client-content {
			background-color: #fff;
			text-align: center;

			.active {
				color: #2A8FFC;
			}
		}

		.sub-client-box {
			background-color: #fff;

			.sub-client-btn {
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}

		.no-client {
			text-align: center;
			font-size: 28rpx;
			color: #7A808A;

			.no-client-img {
				margin: 40rpx auto 0;
				display: flex;
				justify-content: center;
			}
		}

		.correlation-need-box {
			position: absolute;
			width: 160rpx;
			font-size: 20rpx;
			right: -20rpx;
			background: rgba(0, 0, 0, 0.9);
			top: -30rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 10rpx;
			color: #fff;

			position: fixed;
			top: 230rpx;
			right: 20rpx;
			z-index: 10;

			.need-tip {
				position: relative;

				&::after {
					content: '';
					width: 0;
					height: 0;
					border-right: 12rpx solid transparent;
					border-left: 12rpx solid transparent;
					border-top: 12rpx solid rgba($color: #000000, $alpha: 0.9);
					position: absolute;
					bottom: -12rpx;
					left: 50%;
					margin-left: -10rpx;
				}
			}

		}

		.need-box2 {
			top: 330rpx;
		}

		.user-name {
			margin-right: 16rpx;
		}
	}
</style>